<template>
  <div class="page">
    <van-field
        v-model="searchData.city"
        center
        clearable
        label="范围"
        placeholder="请输入查询范围"
    >
    </van-field>
    <van-field
        v-model="searchData.address"
        center
        clearable
        label="名称"
        placeholder="请输入地址"
    >
      <template #button>
        <van-button size="small" type="primary" @click="searchAction">查询</van-button>
      </template>
    </van-field>
    <van-divider :hairline="false">经纬度信息如下</van-divider>
    <div class="result">{{loc}}</div>
    <van-divider :hairline="false">完整信息如下</van-divider>
    <div class="result">{{result}}</div>
  </div>
</template>
<script>
import { getGeoLocInfo } from '@/api/test'
export default {
  components: {},
  data () {
    return {
      searchData: {
        address: '沈阳市沈河区青年大街1号',
        city: '沈阳'
      },
      loc: '',
      result: ''
    }
  },
  computed: {},
  watch: {},
  mounted() {

  },
  methods: {
    searchAction() {
      this.loc = ''
      this.result = ''
      const params = {
        key: '65a193fc43f97bbdf5c9937f89d98d55',
        address: this.searchData.address,
        city: this.searchData.city
      }
      getGeoLocInfo(params).then((res) => {
        this.result = JSON.stringify(res.data)
        if (res.data.status == '1') {
          this.loc = res.data.geocodes[0].location
        }
      })
    },
  }
}
</script>

<style lang='less' scoped>
.page {
  padding: 20px;
}
.result {
  width: 100%;
  min-height: 100px;
  overflow: auto;
}
</style>
